<template>
    <div id="box">
        <nav>
            <img src="static/icons/back.png" @click="back">
            <img src="static/icons/share.png" @click="share">
        </nav>
        <div id="box-content">
            <img class="pic" :src="'http://static.kaytrip.com/'+ticketsDetail.thumb">
            <div class="img-bottom">
                <p class="title">{{ticketsDetail.name_cn}}</p>
                <div class="comment-box">
                    <div class="comment">
                        <div class="start">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </div>
                    </div>
                    <div class="price">
                        <span>€</span>
                        <span>{{ticketsDetail.price_base}}</span>
                        <span>/人起</span>
                    </div>
                </div>
            </div>
          
            <div id="title-info">
                <span class="fa fa-file-text-o">概况</span>
                <span class="fa fa-calendar">使用</span>
                <span class="fa fa-map-o">详情</span>
            </div>
            <div id="detail">
                <div id="top">
                    <p>产品编号：DE0012</p>
                    <p>产品类型： 门票，美食</p>
                    <p>目的城市：德国-柏林</p>
                    <p>旅行日程：景点门票，特殊活动</p>
                </div>
                <div id="jiage">
                    <span class="span">价格：</span>
                    <p>成人（age4+）：93.9欧元</p>
                    <P>开放时间：18:00-21:00</P>
                    <P>地点：Panoramastra&szlig;e 1A, 10178 Berlin</P>
                    <span class="span">集合地点:</span>
                    <P>请直接到一楼安检处出示您的票券。入口位于电视塔背面，正对亚历山大S-Bahn (rail)站。</P>
                    <p>Please make your way directly to the security control point on the first floor of the TV Tower with your e-ticket or printed ticket to hand.The steps leading up to the entrance are located on the tower's northern side, directly opposite the Alexanderplatz S-Bahn (rail) station.</p>
                    <P>暂无航班信息</P>
                </div>
            </div>
            <div id="bottom">
                <p><span class="fa fa-flag-o"></span>费用说明</p>
                <p><span class="fa fa-file-text-o"></span>购买说明</p>
                <p><span class="fa fa-file-audio-o"></span>退订说明</p>
                <p><span class="fa fa-question"></span>注意事项</p>
            </div>
            <div id="share-bg" v-show="showBg"></div>
            <div id="share-box">
                <div id="shareApp">
                    <div>
                        <a href="http://service.weibo.com/share/share.php?url=http%3A%2F%2Fm.kaytrip.com%2Fproduct%2Fdetail%3Fid%3D2114%26referer%3Dlist%230-tsina-1-53836-397232819ff9a47a7b7e80a40613cfe1&title=%E5%86%B0%E5%B2%9B%E5%85%A8%E8%A7%8810%E6%97%A5%E6%B7%B1%E5%BA%A6%E6%B8%B8&appkey=1343713053&pic=http%3A%2F%2Fstatic.kaytrip.com%2Fuploads%2F1611%2Fimage%2F1611110814245088.jpg&searchPic=true#_loginLayer_1509959625077">
                        <img src="static/icons/weibo.png">
                        </a>
                        
                        <p class="size">新浪微博</p>
                    </div>
                    <div>
                        <a href="http://connect.qq.com/widget/shareqq/index.html?url=http%3A%2F%2Fm.kaytrip.com%2Fproduct%2Fdetail%3Fid%3D2114%26referer%3Dlist%230-sqq-1-83377-9737f6f9e09dfaf5d3fd14d775bfee85&title=%E5%86%B0%E5%B2%9B%E5%85%A8%E8%A7%8810%E6%97%A5%E6%B7%B1%E5%BA%A6%E6%B8%B8&desc=%E5%86%B0%E5%B2%9B%E5%85%A8%E8%A7%8810%E6%97%A5%E6%B7%B1%E5%BA%A6%E6%B8%B8&summary=&site=baidu&pics=http%3A%2F%2Fstatic.kaytrip.com%2Fuploads%2F1611%2Fimage%2F1611110814245088.jpg">
                        <img src="static/icons/qq.png" alt="">
                        </a>
                        
                        <p class="size">qq好友</p>
                    </div>
                    <div>
                        <img src="static/icons/kqq.png">
                        <p class="size">qzone</p>
                    </div>
                </div>
                <p id="cancel" @click="cancel">取消分享</p>
            </div>
            <div id="tabbar">
                <div class="bottom-size left">
                    <span　class="fa fa-phone" id="font"></span>
                    <span>€{{ticketsDetail.price_base}}/人起</span>
                </div>
                <router-link :to="'/payPage/abc/'+ticketsDetail.name_cn" class="bottom-size right">
                    <div>立即预定</div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data:function(){
        return{
           showBg:false
        }
    },
    // props:["value"],
    methods:{
        back(){
            history.back();
        },
        share(){
            this.showBg=true;
            var box= document.getElementById("box-content");
            var shareBox =document.getElementById("share-box");
            var shareBg= document.getElementById("share-bg");
            box.style="overflow:hidden";
            shareBox.style="height:190px";
            shareBg.style="opacity:1"
        },
        cancel(){
            this.showBg=false;
            var box= document.getElementById("box-content");
            var shareBox =document.getElementById("share-box");
            var shareBg= document.getElementById("share-bg");
            box.style="overflow:scroll";
            shareBox.style="height:0";
            shareBg.style="opacity:0";
        }
    },
    mounted:function(){
        // console.dir()
        this.$store.dispatch("requestEachTicket",this.$route.params.n)
    },
    computed:{
        ...mapState({
            ticketsDetail:state=>state.ninePage.ticketsDetail
        })
    }
}
</script>

<style lang='css' scoped>
    a{
        text-decoration: none;
    }
    #box{
        background-color: #f4f4f4;
        position: relative;
    }
    #box-content{
         position: relative;
         height: calc(100vh - 53px);
         overflow: scroll;
    }
    p{
        margin: 0;
    }
    nav{
        width: 100vw;
        height: 53px;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        padding: 0 6px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
    }
    nav img{
        width: 30px;
        height: 30px;
        margin-top: 12px;
    }
    .pic{
        width: 100vw;
        height: 230px;
    }
    .img-bottom{
        padding:0 12px;
        background-color: #fff;
        /*border: 1px  solid blanchedalmond;*/
    }
    .title{
        font-size: 18px;
        color: #3d4145;
    }
    .comment-box{
        display: flex;
        justify-content: space-between;
        height: 25px;
        line-height: 20px;
    }
    .comment{
        display: flex; 
    }
    .start{
        font-size: 14px;
        color: #f9d6b7
    }
    i:nth-last-of-type(1){
        color: #eae4e4;
    }
    .trveled{
        color: #939393;
        font-size: 13px;
        margin-left: 8px;
    }
    .price span:nth-of-type(1){
        color: #fe7467;
        font-size: 10px;
    }
    .price span:nth-of-type(2){
        color: #fe7467;
        font-size: 18px;
    }
    .price span:nth-of-type(3){
        color: #939393;
        font-size: 12px;
    }
    #title-info{
        height: 50px;
        background-color: #f4f4f4;
        display: flex;
        justify-content: space-around;
        padding-top: 18px;
        color: #44484c;
        font-size: 18px;
        /*border: 1px  solid red;*/
    }
    #detail{
        width: 100vw;
        /*height: 300px;*/
        margin-bottom: 8px;
        background-color: #fff;
        /*border: 1px  solid red;*/
    }
    #bottom{
        width: 100vw;
        background-color: #fff;
        padding-left: 12px;
        color: #3c3a3a;
    }
    #bottom p{
        display: block;
        height: 50px;
        border-bottom: 1px  solid #eee;
        line-height: 50px;
    }
    #bottom span{
        margin-right: 8px;
    }
    #share-bg{
        width: 100vw;
        height: 100vh;
        /*position: absolute;*/
        background-color: rgba(0, 0, 0, 0.6);
        left: 0;
        top: 0;
        overflow: hidden;
        opacity:0;
        transition: all 0.7s;
        position: fixed;
    }
    #share-box{
        width: 100vw;
        height: 0px;
        background-color: #fff;
        /*position: absolute;*/
        left: 0;
        bottom: 0;
        transition: all 0.5s;
        /*border: 1px  solid red;*/
        overflow: hidden;
        position: fixed;
        z-index: 100;
    }
    #cancel{
        display: block;
        width: 100vw;
        height: 53px;
        background-color: #f5f5f5;
        line-height: 53px;
        text-align: center;
        color: #6d6d6d;
        font-size: 18px;
    }
    #shareApp{
        height: calc(190px - 53px);
        /*border: 1px  solid red;*/
        display: flex;
        justify-content: space-around;

    }
    #shareApp img{
        width: 82px;
        height: 74px;
        margin-top: 5px;
    }
    .size{
        /*border: 1px  solid red;*/
        color: #6d6d6d;;
        font-size: 14px;
        text-align: center;
    }
    /*-----------*/
    p{
        margin: 5px 20px;
    }
    #top{
        /*display: flex;*/
        background-color: #fff;
        color: #4c4f53;
        font-size: 14px;
        /*border: 1px  solid  red;*/
        padding-top: 5px;
    }
    #jiage>p{
        color: #6d6d6d;
        font-size: 12px;
        margin:20 10px;
    }
    .span{
        margin-left: 17px;
        font-size: 15px;
    }
    #tabbar{
        position: fixed;
        left: 0;
        bottom: 0;
        height: 53px;
        /*border: 1px  solid red;*/
        display: flex;
        width: 100vw;
    }
    .bottom-size{
        width: 50%;
        text-align: center;
        line-height: 53px;
         
    }
    #tabbar .left{
        background-color: #fFF;
        color:#fe7467;
    }
    #tabbar .right{
        background-color: #fe7467;
        color: #fff;
        font-size: 18px;
    }
    .left{
        display: flex;
        justify-content: space-around;
    }
    #font{
        font-size: 30px;
        color: #a5a5a5;
        margin-top: 10px;
        
    }

    
</style>